<template>
    <el-card shadow="never">
        <div slot="header">动态表单(switch)</div>
        <DynamicForm :schema="schema" :formData="formData"></DynamicForm>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </el-card>
</template>

<script>
import CodeTpl from './md/switch.md';

export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            schema: {
                properties: {
                    num1: {
                        label: '禁用',
                        widget: 'switch',
                        ui: {
                            disabled: true
                        }
                    },
                    num2: {
                        label: '颜色',
                        widget: 'switch',
                        ui: {
                            activeColor: '#13ce66',
                            inactiveColor: '#ff4949'
                        }
                    },
                    num3: {
                        label: '描述',
                        widget: 'switch',
                        ui: {
                            activeText: '开',
                            inactiveText: '关'
                        }
                    },
                    num4: {
                        label: '扩展Value',
                        widget: 'switch',
                        ui: {
                            activeValue: '100',
                            inactiveValue: '0'
                        }
                    }
                },
                grid: {
                    row: {
                        gutter: 20
                    },
                    col: {
                        span: 8
                    }
                }
            },
            formData: {}
        }
    },
}
</script>

<style>

</style>